import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';
import CryptoJS from 'crypto-js';
import { userLogin } from '../../services/login';
import { cookie } from 'project-libs';

import 'antd/dist/antd.less';
import './index.css';

const encrypt = (plaintText) => {
  const CRYPTOJSKEY = 'cmbCampus0722000';
  const options = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 };
  const key = CryptoJS.enc.Utf8.parse(CRYPTOJSKEY);
  const encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
  const encryptedBase64Str = encryptedData.toString();
  return encryptedBase64Str;
};

export default function Login() {
  const onFinish = (values) => {
    const userAccount = values.username;
    const userPassword = encrypt(values.password);
    userLogin({ userAccount: 18979307261, userPwd: encrypt('zhhdzs129') }).then((res) => {
      if (res.code == 200) {
        cookie.set('cookie', JSON.stringify(res.data), { hours: 1 });
        message.success('登录成功');
        history.push('/');
      } else {
        message.error('账号密码错误');
      }
    });
  };

  return (
    <div className="content">
      <div className="loginContent">
        <p className="loginContent_p">秦学后台管理</p>
        <div className="loginFform">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入账号!',
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入账号"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入登录密码!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请输入登录密码"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登 录
              </Button>
            </Form.Item>
          </Form>
        </div>
        <a className="loginForm_a" href="https://blog.csdn.net/qq_53283188?spm=1010.2135.3001.5343">
          使用手机小程序提示的账号密码登录
        </a>
      </div>
    </div>
  );
}
